<template>
  <span class="my-button">
    <span
      :class="['btn', 'btn-' + type, 'btn-' + size]"
      @click.stop="click"
      @dblclick="dblClick"
    >
      按钮
    </span>
  </span>
</template>

<script>
export default {
  name: "MyButton",
  props: {
    type: {
      default: "",
      validator: function (value) {
        return ["", "primary", "danger", "success"].includes(value);
      },
    },
    size: {
      default: "",
      validator: function (value) {
        return ["", "medium", "small", "mini"].includes(value);
      },
    },
  },
  data() {
    return {};
  },
  computed: {
    btnClass() {
      return {
        "add-btn": true,
        "btn-danger": this.type === "danger",
        "btn-success": this.type === "success",
        "btn-big": this.size === "big",
        "btn-small": this.size === "small",
      };
    },
  },
  methods: {
    click() {
      this.$emit("click", this.type);
    },
    dblClick() {
      this.$emit("dblclick");
    },
  },
};
</script>
<style scoped>
.btn {
  display: inline-block;
  line-height: 1;
  padding: 12px 23px;
  text-align: center;
  font-size: 14px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #ccc;
  cursor: pointer;
}
.btn-primary {
  background: #409eff;
  border-color: #409eff;
  color: #fff;
}
.btn-danger {
  background: red;
  border-color: red;
  color: #fff;
}
.btn-success {
  background: #67c23a;
  border-color: #67c23a;
  color: #fff;
}
.btn-medium {
  padding: 10px 20px;
}
.btn-small {
  padding: 8px 18px;
}
.btn-mini {
  padding: 7px 14px;
}
</style>